<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
            integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw"
            crossorigin="anonymous"
    />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
    <title>全球新型冠状病毒实时数据统计</title>
</head>

<body class="mdui-theme-layout-auto">
<div class="mdui-container">
    <h1 th:text="(${country}==null?'全球':${country})+'新型冠状病毒实时数据统计'" align="center" style="color: #536DFE"></h1>

    <div class="jumbotron" >
        <p class="lead">当前时间：<span th:text="${#temporals.format(localDateTime,'yyyy-MM-dd HH:mm')}"></span></p>

        <p class="lead" th:text="'截至今天'+(${country}==null?'全球':${country})+'新冠肺炎确诊病例数:'"></p>
        <h1 th:text="${totalReportedCases}"></h1>

        <p>
            <span th:text="'较前一日新增'+(${country}==null?'全球':${country})+'新冠肺炎确诊病例数:'"></span>
            <span th:text="${totalNewCases}"></span>
        </p>
    </div>
</div>
<div class="mdui-typo">
    <hr/><br/>
</div>
<div class="mdui-table-fluid mdui-container mdui-color-transparent" style="height:550px">
    <table class="mdui-table mdui-table-hoverable">
        <thead>
        <tr bgcolor="#00BCD4">
            <th>省/州</th>
            <th>国家/地区</th>
            <th>确诊病例总数</th>
            <th>较前一日新增病例数</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="allStates:${regionStats}">
            <td th:text="${allStates.state}"></td>
            <td th:text="${allStates.country}"></td>
            <td th:text="${allStates.latestTotalCases}"></td>
            <td th:text="${allStates.diffFromPrevDay}"></td>
        </tr>
        </tbody>
    </table>
</div>
<br/>
<div class="mdui-bottom-nav mdui-typo-caption-opacity">
    @东莞理工学院-XZX
</div>
</body>
</html>
